<template>
    <layout>
        <mt-header title="详细轨迹">
            <a href="/member/grow" slot="left">
                <mt-button  icon="back"></mt-button>
            </a>
        </mt-header>

        <!--title-->
        <div class="title">
            {{ detail.title }}
        </div>

        <!--人物发布内容-->
        <div class="con_title">
            <div class="con_top">{{ detail.content }}</div>
            <div class="con_img">
                <template v-for="img in detail.images">
                    <img :src="showImage(img)"/>
                </template>
            </div>
        </div>

        <ol>
            <li>
                1002赞
            </li>
            <li >
                <div class="fast"  v-for="item in list">
                    <img :src="api.image + item.headImgUrl">

                </div>
            </li>

        </ol>

        <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
            <ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                <li v-for="item in list">
                    <div class="active_l">
                        <img :src="api.image + item.headImgUrl"/>
                    </div>
                    <div class="active_c">
                        <div class="top">{{ item.commentPersonName }}</div>
                        <div class="time">{{ item.createDate }}</div>
                        <div class="titles">{{ item.content }}</div>
                        <!--<div class="look">查看{{ item.reviewCount }}条回复</div>-->

                        <div class="look">
                            <a :href="'/information/comment/'+item.id" class="list_f_l" v-if="item.reviewCount == 0">回复</a>
                            <a :href="'/information/comment/'+item.id" class="list_f_l" v-else>查看{{item.reviewCount}}条回复</a>
                        </div>
                    </div>


                    <div class="active_r"></div>

                </li>
            </ul>
        <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :size="20" type="fading-circle"></mt-spinner>
            <span>加载中...</span>
        </p>

    </div>

</layout>
</template>
<style lang="scss">
@import "index.scss";

</style>
<script type="text/babel">
import { api, image } from 'framework/config.js';
import Layout from "component/layout/standard";

import Vue from 'vue'
import Mint from 'mint-ui';
Vue.use(Mint);

export default {
    components: {
        Layout
    },
    data(){
        return {
            isShow:false,
            isNone:true,

            content: '',
            selected: '1',
            list: [],
            lastPage: false,
            pageNo: 0,
            nextPage: 1,
            totalCount: 0,
            sort: 0,
            type: '',
            loading: false,
            wrapperHeight: 0
        }
    },
    computed: {
        api(){
            return api();
        }
    },
    methods: {
        showImage(url, params){
            return image(this.api.image, url, params);
        },
        showchange:function(){
            this.isShow = true
            this.isNone = false
        },
        loadMore(){
            if (this.lastPage){
                return;
            }
            this.loading = true;
            this.$http.get('/api/comment/list', {
                params: {
                    type: 5,
                    id: this.detail.id,
                    pageNo: this.nextPage
                }
            }).then((response) => {
                if (response.status == 200){
                    let data = response.data;
                    if (data.code == 200) {
                        data = data.data;
                        this.lastPage = data.lastPage;
                        this.pageNo = data.pageNo;
                        this.nextPage = data.nextPage;

                        let list = data.list;
                        for (let i = 0; i < list.length; i++){
                            this.list.push(list[i]);
                        }

                    }

                }else{
                    this.lastPage = true;
                }
                this.loading = false;
            })
        },

    },
    created(){
    },
    mounted() {
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    }
}
</script>

